<template>
  <a-table :pagination="pagination" :columns="columns" :dataSource="TzDataSource">


    <div
      slot="filterDropdown"
      slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      style="padding: 8px"
    >
      <a-input
        v-ant-ref="c => searchInput = c"
        :placeholder="`Search ${column.dataIndex}`"
        :value="selectedKeys[0]"
        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
        @pressEnter="() => handleSearch(selectedKeys, confirm)"
        style="width: 188px; margin-bottom: 8px; display: block;"
      />
      <a-button
        type="primary"
        @click="() => handleSearch(selectedKeys, confirm)"
        icon="search"
        size="small"
        style="width: 90px; margin-right: 8px"
      >Search
      </a-button
      >
      <a-button
        @click="() => handleReset(clearFilters)"
        size="small"
        style="width: 90px"
      >Reset
      </a-button
      >
    </div>
    <a-icon
      slot="filterIcon"
      slot-scope="filtered"
      type="search"
      :style="{ color: filtered ? '#108ee9' : undefined }"
    />
    <template slot="customRender" slot-scope="text">
      <span v-if="searchText">
        <template
          v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
          <mark
            v-if="fragment.toLowerCase() === searchText.toLowerCase()"
            :key="i"
            class="highlight">{{ fragment }}</mark>
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
      <template v-else>{{ text }}</template>
    </template>


    <!--<a slot="action" href="javascript:;">Delete</a>-->
    <!--里面放该帖子的内容展示，不展示评论，操作放在下面的div的右下角-->
    <div slot="expandedRowRender" slot-scope="record">
      <div>帖子内容：</div>
      <p style="margin: 0">{{ record.tzNr }}</p>
    </div>
      <a-dropdown  slot="action">
        <a class="ant-dropdown-link">操作<a-icon type="down" /> </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;">警告</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">删除</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">前置</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
  </a-table>
</template>
<script>

  import { getAction } from '@/api/manage'

  export default {
    name: 'RzGlTable',
    data() {
      return {
        searchText: '',
        searchInput: null,
        columns:[
          {
            title: '发表人', dataIndex: 'writer', key: 'writer', width: 100,
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'customRender'
            },
            //查找
            onFilter: (value, record) => record.writer.toString().toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: visible => {
              if (visible) {
                setTimeout(() => {
                  this.searchInput.focus()
                }, 0)
              }
            }
          },
          {
            title: '帖子名', dataIndex: 'title', key: 'title', width: 300,
            //查找
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'customRender'
            },
            onFilter: (value, record) => record.title.toString().toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: visible => {
              if (visible) {
                setTimeout(() => {
                  this.searchInput.focus()
                })
              }
            }
          },
          {
            title: '发表日期',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 120,
            //排序
            sorter: (a, b) => a.createTime - b.createTime
          },
          { title: '操作', dataIndex: '', key: 'x',width:80, scopedSlots: { customRender: 'action' } }
        ],
        pagination: {
          showQuickJumper: true,
          defaultPageSize: 10,
          showSizeChanger: true,
          // pageSizeOptions: [10, 15, 30, 50, 80, 100, 150, 200],
          style: {
            marginRight: '15px'
          }
        },
        allTzData: null,
        TzDataSource: null,
        url: {
          getAllTz: '/my/qzInfo/getAllTz'
        }
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      handleSearch(selectedKeys, confirm) {
        confirm()
        this.searchText = selectedKeys[0]
      },
      handleReset(clearFilters) {
        clearFilters()
        this.searchText = ''
      },
      onChange(pageNumber) {
        console.log('Page: ', pageNumber)
      },
      loadData() {
        getAction(this.url.getAllTz).then((res) => {
          if (res.success) {
            console.log('allTzData', res.result)
            this.allTzData = res.result
            console.log(this.allTzData)
            var data = [];
            for (var i =0;i< this.allTzData.length;i++){
              var oneData={
                key: i+1,
                title: this.allTzData[i].tz.tzBt,
                writer:this.allTzData[i].tzUser.userNc,
                createTime: this.allTzData[i].tz.tzFbrqsj,
                tzNr: this.allTzData[i].tz.tzNr
              }
              data.push(oneData)
            }
            console.log(data)
            this.TzDataSource=data

          }
        })
      }
    }
  }
</script>